<template>
	<view class="tbody">

		<!-- <view  @click="appealDetails" v-for="item in rows" :key="item.id"> -->
		<view @click="appealDetails(item.id,item.state)" v-for="item in rows" :key="item.id">
			<!-- 已解答 -->
			<view class="dispose">
				<!-- 个人信息头像展示 -->
				<view class="dispose-message">
					<view class="dispose-message-left">
						<image :src="URL + item.avatar" mode=""></image>
					</view>
					<view class="dispose-message-center">
						<view class="center-one" style="line-height: 64rpx;">
							{{item.createName}}
						</view>
					</view>
					<view class="dispose-message-right">
						{{item.createTime}}
					</view>
				</view>
				<!-- 中间标题 -->
				<view class="headline">
					<!--          修复备注为空时 页面展示null-->
					{{item.remark === null ? '&nbsp;' : item.remark}}
				</view>

				<!-- 文章 -->
				<view class="article">
					{{item.content}}
				</view>

				<!-- 是否解答的盒子 -->

				<!-- 已解答 -->
				<image v-if="item.state==='1'"
					src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/yjd.png" mode="" class="image">
				</image>
				<!-- 未解答 -->
				<image v-else src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/wjd.png" mode=""
					class="image"></image>
			</view>
		</view>

		<!-- -------------------- -->
		<!-- 添加盒子 -->
		<view class="add" v-show="keybl">
			<view class="add-y">
				<navigator url="../appealAdd/appealAdd" @click="addY">
					<image src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/jiahao.png" mode="">
					</image>
				</navigator>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				URL:this.$store.state.user.URL,	
				key: uni.getStorageSync('roleKey'),
				//  0是未解答 1是已解答
				rows: [],
				// 本页共有几条数据
				total: 10,
				page_data: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		computed: {
			// 判断是不是管理员，是管理员就返回一个false，不是就返回一个true
			keybl() {
				if (this.key === 'manager') {
					return false
				} else {
					return true
				}
			}
		},
		onShow() {
			this.rows = []
			this.getAppealList()
		},
		// 上拉加载
		onReachBottom() {
			//触发了上拉加载，请求下一页（10）条数据
			let allTotal = this.page_data.pageNum * this.page_data.pageSize
			if (allTotal < this.total) {
				// 判断当前条数小于总条数
				this.page_data.pageNum++
				this.getAppealList('/business/appeal/list')
			} else {
				uni.showToast({
					title: '已加载全部数据',
					icon: 'none'
				})
			}

		},

		// 下拉刷新
		onPullDownRefresh() {
			console.log('触发了下拉刷新');
			this.rows = []
			// 调用获取数据的方法
			this.getAppealPage()
			setTimeout(() => {
				// 结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000)
		},

		methods: {
			addY() {
				uni.navigateTo({
					url: '/pages/appealAdd/appealAdd'
				})
				this.rows = []
			},
			// 下拉刷新
			async getAppealPage() {
				this.page_data = {
					pageNum: 1,
					pageSize: 10
				}
				const res = await uni.$http.get('/business/appeal/list', {
					params: this.page_data
				})
				if (res.data.code == 200) {
					//新数据push到列表中
					console.log(res);
					this.rows = res.data.rows
					for (let i = 0; i < this.rows.length; i++) {
						this.rows[i].content = this.rows[i].content.replace(/<\/p><p>/g, "   "); // 每段p标签中间加段空格
						this.rows[i].content = this.rows[i].content.replace(/<[^>]*>/g, "");
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			// 获取诉求列表
			async getAppealList(url) {
				const res = await uni.$http.get('/business/appeal/list', {
					params: this.page_data
				})
				this.total = res.data.total
				if (res.data.code == 200) {
					res.data.rows.forEach((item, index) => {
						item.content = item.content.replace(/<\/p><p>/g, "   "); // 每段p标签中间加段空格
						item.content = item.content.replace(/<[^>]*>/g, "");
						this.rows.push(item)
					})

				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}


			},

			// 点击诉求跳转
			appealDetails(id, state) {
				this.rows = []
				if (this.keybl) {
					// 不是管理员，去诉求详情
					uni.navigateTo({
						url: '/pages/appealDetails/appealDetails?id=' + id
					})
				} else {
					// 是管理员去解答诉求
					uni.navigateTo({
						url: '/pages/appealHelp/appealHelp?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.add {
		position: fixed;
		width: 750rpx;
		left: 0;
		bottom: 0;
		height: 96rpx;
		background: rgba(235, 252, 255, 1);
		box-shadow: 0px -1px 2px 0px rgba(22, 193, 219, 0.1);

		.add-y {
			box-sizing: border-box;
			width: 112rpx;
			height: 112rpx;
			border-radius: 30px;
			background: rgba(22, 193, 219, 1);
			box-shadow: 0px 0px 0px 0px rgba(22, 193, 219, 0.2), 0px 1px 2px 0px rgba(22, 193, 219, 0.2), 0px 3px 3px 0px rgba(22, 193, 219, 0.17), 0px 7px 4px 0px rgba(22, 193, 219, 0.1), 0px 13px 5px 0px rgba(22, 193, 219, 0.03), 0px 20px 5px 0px rgba(22, 193, 219, 0);
			margin: 0 auto;
			transform: translate(0, -44rpx);
			text-align: center;
			padding: 24rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				color: rgba(235, 252, 255, 1);
			}
		}
	}

	.dispose {
		position: relative;
		opacity: 1;
		border-radius: 20rpx;
		background: #F2FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		padding: 32rpx;
		margin-bottom: 32rpx;

		.dispose-message {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e6f1f3;
			margin-bottom: 24rpx;

			.dispose-message-left {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 60rpx;
				}
			}

			.dispose-message-center {
				width: 430rpx;

				.center-one {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(20, 58, 64, 1);
					margin-bottom: 6rpx;
				}

				.center-two {
					font-size: 16rpx;
					font-weight: 400;
					color: #c3d1d4;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.dispose-message-right {
				font-size: 16rpx;
				font-weight: 400;
				color: #c3d1d4;

			}
		}

		.headline {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 58, 64, 1);
			margin-bottom: 32rpx;
		}

		.article {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			color: #c3d1d4;
			text-align: justify;
			vertical-align: top;

		}
	}

	.image {
		position: absolute;
		right: 0;
		top: 0;
		width: 80rpx;
		height: 32rpx;
	}
</style>